<template>
	<uni-nav-bar title="新增服务站" left-icon="left" @clickLeft="navBack" statusBar></uni-nav-bar>
	<view class="package" style="padding:0px 20rpx;">
		<view class="space-between">
			<view>服务站名称</view>
			<input class="uni-input" placeholder="请输入服务站名称" v-model="name" />
		</view>
		<view class="space-between" style="align-items: flex-start;">
			<view>位置</view>
			<input class="uni-input" placeholder="请输入服务站位置" v-model="locName" />
		</view>
	</view>
	<view class="add" @click="submit()">确定</view>
</template>

<script setup lang="ts">
	import { navBack } from '@/utils/navigator';
	import { ref, Ref } from 'vue';
	import { toPublish } from '@mqtt';
	import { errorToast, showLoading, successToast } from '@/utils/prompt';
	const name = ref('')
	// data
	const locName = ref('')
	function submit() {
		if (!name.value) {
			errorToast('请输入服务站名称')
			return
		}
		if (!locName.value) {
			errorToast('请输入服务站位置')
			return
		}
		showLoading()
		const payload = {
			name: name.value,
			address: locName.value
		};
		toPublish(
			'control/addServiceArea',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { code, msg } = obj;
				if (code === 1) {
					successToast(msg)
					navBack()
				} else {
					errorToast(msg)
				}
			}
		);
	}
</script>

<style scoped lang="less">
	.add {
		width: 480rpx;
		height: 100rpx;
		background: linear-gradient(-10deg, #2C96F9, #1B91FF);
		border-radius: 5px;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		margin: 60rpx auto 20rpx;
		font-size: 32rpx;
	}

	.space-between:nth-last-child(1) {
		border-bottom: 0px;
	}

	.space-between {
		padding: 30rpx 0px;
		border-bottom: 1px solid #eee;

		input {
			text-align: right;
		}
	}
</style>